<template>
  <el-button type="primary" @click="sendMsg">发送消息</el-button>
  <div id="nav">
    <el-menu :router="true" mode="horizontal">
      <!-- 主应用中也可以放自己的路由 -->
      <el-menu-item @click="goToPage('main-app', '/')">首页</el-menu-item>
      <!-- 引用其他的子应用 -->
      <el-menu-item @click="goToPage('user-app', '/user-app')">user</el-menu-item>
      <el-menu-item @click="goToPage('order-app', '/order-app')">order</el-menu-item>
      <el-menu-item @click="goToPage('test-app', '/test-app')">test</el-menu-item>
    </el-menu>
    <router-view v-show="route.name"></router-view>
    <main id="child-view"></main>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import actions from './utils/action'
  const route= useRoute();
 
  onMounted(()=>{
    actions.onGlobalStateChange((state, prev) => {
      // state: 变更后的状态; prev 变更前的状态
      console.log(state, prev, "主应用...............");
    });
  })
 
 const goToPage= function(app, url) {
  history.pushState({}, app, url);
 }
 
  const sendMsg= function() {
    actions.setGlobalState({username: '张三'});
    // state.username= "张三"
  }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
